<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="120px" slot="form" v-collapse="true">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="用户所在省">
                            <el-select v-model="formInline.fProvinceId" placeholder="请选择" style="width:100%" @change="changeProvice(formInline.fProvinceId)">
                                <el-option v-for="(item,index) in formInline.province" :key="index" :label="item.provinceName" :value="item.provinceId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户所在市">
                            <el-select v-model="formInline.fCityId" placeholder="请选择" style="width:100%" @change="changeCityId(formInline.fCityId)">
                                <el-option v-for="(item,index) in formInline.findCity" :key="index" :label="item.cityName" :value="item.cityId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户所在区">
                            <el-select v-model="formInline.fAreaId" placeholder="请选择" style="width:100%">
                                <el-option v-for="(item,index) in formInline.findArea" :key="index" :label="item.areaName" :value="item.areaId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号">
                            <el-input v-model="formInline.exueCode" placeholder="请输入e学云ID号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名">
                            <el-input v-model="formInline.userName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号">
                            <el-input v-model="formInline.phone" placeholder="请输入手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份">
                            <el-select v-model="formInline.userType" placeholder="请选择" style="width:100%" >
                                <el-option v-for="(item,index) in formInline.identityArr" :key="index" :label="item.identityName" :value="item.identityId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="注册时间">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>             
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="formBtn">
                    <div class="btnPosition">
                        <el-button type="primary" @click="search">查询</el-button>
                    </div>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <span class="table-title-span">查询列表</span>
            </div>
            <el-table :data="AnnounceList" style="width: 100%" border @selection-change="handleSelectionChange" ref="multipleTable" v-loading="loading">
                <el-table-column label="序号" width="50" type="index" align="center">
                </el-table-column>
                <el-table-column align="center" label="e学云ID号" min-width="100" prop="exueCode">
                </el-table-column>
                <el-table-column label="姓名" align="center" prop="userName" min-width="120">
                </el-table-column>
                <el-table-column label="身份" align="center" min-width="80">
                    <template scope="scope">
                        <span>{{scope.row.userType | filterUserType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center" prop="phone" min-width="130">
                </el-table-column>
                 <el-table-column label="所属区域" align="center" min-width="160">
                    <template scope="scope">
                        <span>{{scope.row.provinceName}}-{{scope.row.cityName}}-{{scope.row.areaName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" min-width="160">
                    <template scope="scope">
                        <span>{{scope.row.createTime | filterTime}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import moment from 'moment';
import {queryAllProvince, queryAllCityByProvinceId, queryAllAreaByCityId} from 'api/common';
import {findUsersByPage} from 'api/userManagement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
// import validate from '@/utils/validate';
export default {
    components: { TableLayout },
    data() {
        return {
            formInline: {
        // 查询 表单数据
                fProvinceId: '', // 省份
                fCityId: '', // 市区
                fAreaId: '', // 区县
                exueCode: '', // e学云ID号
                userName: '', // 姓名
                phone: '', // 手机号
                userType: '1', // 身份
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                province: [], // 省份列表
                findCity: [], // 城市列表
                findArea: [], // 区县列表
                pickerOptions1: {},
                pickerOptions2: {},
                identityArr: [
                    { identityName: '教师', identityId: '1' },
                    { identityName: '学生', identityId: '2' },
                    { identityName: '家长', identityId: '3' }
                ]
            },
            loading: false,
            AnnounceList: [],
            listQuery: { // 分页
                page: 1,
                total: 0
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid'])
    },
    created() {
        this.searchProvice();
        this.searchFetchData();
    },
    filters: {
        filterUserType(value) {
            if (value=='1') return value='教师';
            if (value=='2') return value='学生';
            if (value=='3') return value='家长';           
        },
        filterTime(value) {
            return value.substring(0, 19)
        }
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime();
                }
            }
        },

        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() - 864e5;
                }
            }
        },

        searchProvice() { 
            queryAllProvince().then(response => {
                let findProvice = response.data.content;
                let select = {
                    provinceName: '请选择',
                    provinceId: ''
                };
                findProvice.unshift(select);
                this.formInline.province = findProvice;
                this.formInline.fProvinceId = findProvice[0].provinceId;
            });
        },
        changeProvice(provinceId) {
            this.formInline.findCity = [];
            this.formInline.findArea = [];
            this.formInline.fCityId = '';
            this.formInline.fAreaId = '';
            queryAllCityByProvinceId(provinceId).then(response => {
                let findCity = response.data.content;
                if (findCity[0].cityId == null) {
                    return;
                }
                let select = {
                    cityName: '请选择',
                    cityId: ''
                };
                findCity.unshift(select);
                this.formInline.findCity = findCity;
            });
        },
        changeCityId(cityId) {
            this.formInline.findArea = [];
            this.formInline.fAreaId = '';
            queryAllAreaByCityId(cityId).then(response => {
                let findArea = response.data.content;
                if (findArea[0].areaId == null) {
                    return;
                }
                let select = {
                    areaName: '请选择',
                    areaId: ''
                };
                findArea.unshift(select);
                this.formInline.findArea = findArea;
            });
        },

    // 点击查询
        search() {
            this.loading = true;
            this.searchFetchData();
        },

    // 查询列表
        searchFetchData() {         
            this.loading = true;
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD')+' 00:00:00';
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD')+' 23:59:59';
            findUsersByPage(
                this.listQuery.page,
                this.config.pageSize,
                this.formInline.fProvinceId,
                this.formInline.fCityId,
                this.formInline.fAreaId,
                this.formInline.exueCode, 
                this.formInline.userName,
                this.formInline.phone,
                this.formInline.userType,
                startDate,
                endDate
            ).then(res => {
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;
            });
        },
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
};
</script>

<style lang="scss" scoped>
@import '../../../styles/var';
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
  
}
</style>
